<template>
  <el-table
    :data="permissionArr"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
  >
    <el-table-column label="名称" prop="name"></el-table-column>
    <el-table-column label="权限值" prop="code"></el-table-column>
    <el-table-column label="修改时间" prop="createTime"></el-table-column>
    <el-table-column label="操作">
      <template #="{ row, $index }">
        <el-button
          type="primary"
          size="small"
          :disabled="row.level == 4"
          @click="addPermission(row)"
          >{{ row.level == 3 ? "添加功能" : "添加菜单" }}</el-button
        >
        <el-button
          type="primary"
          size="small"
          :disabled="row.level == 1"
          @click="updatePermission(row)"
          >编辑</el-button
        >
        <el-button
          type="primary"
          size="small"
       
          @click="removePermission(row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 对话框组件 -->
  <el-dialog v-model="show" title="添加菜单" width="500" align-center>
    <template #default>
      <el-form>
        <el-form-item label="名称">
          <el-input
            placeholder="请输入菜单名称"
            v-model="permissionParams.name"
          />
        </el-form-item>
        <el-form-item label="权限">
          <el-input
            placeholder="请输入权限数值"
            v-model="permissionParams.code"
          />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="show = false">取消</el-button>
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { defineOptions, ref, onMounted, reactive } from "vue";
defineOptions({
  name: "Permission",
});
import {
  reqGetHasPermission,
  reqAddOrUpdatePermission,
  reqRemovePermission,
} from "@/api/acl/menu";
import type { MenuList } from "@/api/acl/role/type";
import type { MenuParams } from "@/api/acl/menu/type";
import { ElMessage } from "element-plus";
let permissionArr = ref<MenuList[]>([]); //获取已有权限菜单数据的数组
let show = ref(false); //对话框的展示与隐藏
let permissionParams = reactive<MenuParams>({
  code: "",
  level: "",
  name: "",
  pid: "",
});
onMounted(() => {
  getHasPermission();
});
//获取已有权限菜单的数据
const getHasPermission = async () => {
  let result = await reqGetHasPermission();
  if (result.code == 200) {
    permissionArr.value = result.data;
  }
};
//添加菜单
const addPermission = (row: MenuList) => {
  //清空数据
  Object.assign(permissionParams, {
    id: "",
    code: "",
    level: "",
    name: "",
    pid: "",
  });
  show.value = true;
  permissionParams.level = row.level + 1;
  permissionParams.pid = row.id;
};
//编辑菜单
const updatePermission = (row: MenuList) => {
  Object.assign(permissionParams, row);
  show.value = true;
};
//删除已有菜单
const removePermission = async (id: number) => {
  let result = await reqRemovePermission(id);
  if (result.code == 200) {
    ElMessage({ type: "success", message: "删除成功" });
    getHasPermission();
  } else {
    ElMessage({ type: "error", message: "删除失败" });
  }
};
//对话框的确定按钮的回调
const confirm = async () => {
  let result = await reqAddOrUpdatePermission(permissionParams);
  if (result.code == 200) {
    ElMessage({
      type: "success",
      message: permissionParams.id ? "更新成功" : "添加成功",
    });
    show.value = false;
    getHasPermission();
  } else {
    ElMessage({
      type: "error",
      message: permissionParams.id ? "更新失败" : "添加失败",
    });
    show.value = false;
  }
};
</script>

<style scoped></style>
